<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/style-common.css">
    <link rel="stylesheet" type="text/css" href="css/style-list.css">

    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="js/commn.js"></script>
    <script src="js/list.js"></script>

</head>
<body>
<div id="head-wrapper">
    <div class="head">
        <div class="head-l">
            <a href="#" id="login">登录</a>
            <span>|</span>
            <a href="#" id="reg">免费注册</a>
        </div>
        <ul class="head-r">
            <li>
                <a href="#">设为首页</a>
            </li>
            <li>
                <a href="#">加入收藏</a>
            </li>
            <li>
                <a href="#">在线留言</a>
            </li>
            <li>
                <a href="#">企业位置</a>
            </li>
            <li>
                <a href="#">手机站</a>
            </li>
        </ul>

    </div>
</div>
<div id="logo-wrapper">
    <div class="logo">
        <div class="logo1">
            <a href="images/logo.png">
                <h1>天狗商城</h1>
            </a>
        </div>
        <form>
            <input type="text" class="tet"/>
            <input type="submit" value="搜索" class="sum"/>
        </form>
        <div class="buy">
            <img src="images/buy.png" alt="">
            <a href="#">我的购物车<span>0</span>件商品</a>
            <div>&gt;</div>
        </div>
    </div>
</div>
<div id="inner-wrapper">
    <div class="inner">
        <ul>
            <li>
                <a href="#">首页</a>
            </li>
            <li>
                <a href="#">商品商城</a>
            </li>
            <li>
                <a href="#">服装超市</a>
            </li>
            <li>
                <a href="#">公司新闻</a>
            </li>
            <li>
                <a href="#">人才招聘</a>
            </li>
            <li>
                <a href="#">在线留言</a>
            </li>
            <li>
                <a href="#">关于我们</a>
            </li>
            <li>
                <a href="#">外卖来了</a>
            </li>
            <li>
                <a href="#">场地预订</a>
            </li>
        </ul>
    </div>
</div>

<div id="main-wrapper">
    <div class="main">
        <div class="fir-list">
            <a href="#">首页</a>  <span>>></span>
            <a href="#">商城商品</a>  <span>>></span>
            <a href="#">进口食品</a>
        </div>
        <div class="clas">
            <h3>类别:</h3>
            <ul>
                <li>
                    <a href="#">不限</a>
                </li>
                <li>
                    <a href="#">限量抢鲜</a>
                </li>
                <li>
                    <a href="#">进口食品</a>
                </li>
                <li>
                    <a href="#">休闲零食</a>
                </li>
                <li>
                    <a href="#">冲调饮品</a>
                </li>
                <li>
                    <a href="#">名优美酒</a>
                </li>
                <li>
                    <a href="#">粮油调味</a>
                </li>
                <li>
                    <a href="#">餐饮美食</a>
                </li>
                <li>
                    <a href="#">水果蔬菜</a>
                </li>
                <li>
                    <a href="#">牛奶</a>
                </li>
                <li>
                    <a href="#">饮料</a>
                </li>
                <li>
                    <a href="#">啤酒</a>
                </li>
                <li>
                    <a href="#">速冻食品</a>
                </li>
                <li>
                    <a href="#">米粉</a>
                </li>
                <li>
                    <a href="#">黄酒</a>
                </li>
                <li>
                    <a href="#">白酒</a>
                </li>
                <li>
                    <a href="#">饮用水</a>
                </li>
                <li>
                    <a href="#">进口啤酒</a>
                </li>
                <li>
                    <a href="#">进口白酒</a>
                </li>
                <li>
                    <a href="#">进口饮料</a>
                </li>
                <li>
                    <a href="#">葡萄酒</a>
                </li>
                <li>
                    <a href="#">洋酒</a>
                </li>
                <li>
                    <a href="#">养生酒</a>
                </li>
                <li>
                    <a href="#">美妆洗护</a>
                </li>
                <li>
                    <a href="#">免费产品</a>
                </li>
                <li>
                    <a href="#">家用电器</a>
                </li>
                <li>
                    <a href="#">每日生鲜</a>
                </li>
                <li>
                    <a href="#">方便面</a>
                </li>
            </ul>
        </div>
        <div class="selc">
            <ol>
                <li class="selected">
                    <a href="javascript:;" onclick="test()">时间</a>
                </li>
                <li>
                    <a href="javascript:;" onclick="test()">关注度</a>
                </li>
                <li>
                    <a href="javascript:;" onclick="test()">价格从高到低</a>
                </li>
                <li>
                    <a href="javascript:;" onclick="test()">价格从低到高</a>
                </li>
            </ol>
            <form class="look">
                <span>￥<input type="text" placeholder="0"/></span>
                - <span>￥<input type="text" placeholder="0"/></span>
                <input type="button" value="查询" id="find"/>
            </form>
            <div class="status">
                <a href="#" class="sta1">商品状态 ▼</a>
                <ul>
                    <li class="current">
                        <a href="#" >商品状态</a>
                    </li>
                    <li>
                        <a href="#">推荐</a>
                    </li>
                    <li>
                        <a href="#">促销</a>
                    </li>
                    <li>
                        <a href="#">新品</a>
                    </li>
                    <li>
                        <a href="#">热门</a>
                    </li>
                    <li>
                        <a href="#">特价</a>
                    </li>
                    <li>
                        <a href="#">独家</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="pro-list">
            <ul class="oul">
                <!--<li class="itmes">-->
                    <!--<a href="#" class="limg">-->
                        <!--<img src="images/list/i12.jpg" alt="">-->
                    <!--</a>-->
                    <!--<div class="simg">-->
                        <!--<img src="images/list/s12.jpg" alt="">-->
                    <!--</div>-->
                    <!--<span class="pri">￥27元-->
                        <!--<a href="#" class="iconfont">&#xe653;</a>-->
                    <!--</span>-->
                    <!--<a href="#" class="disc">台湾老杨咸蛋黄饼干有够纤饼干粗粮方块酥进口零食品批发散装500g</a>-->
                    <!--<div class="xiao">-->
                        <!--<div>已有<span>0</span>人评价</div>-->
                        <!--<div>累计销量<span>0</span></div>-->
                        <!--<a href="#" class="shou">☆   收藏</a>-->
                    <!--</div>-->
                    <!--<div class="kong">售罄</div>-->
                <!--</li>-->

            </ul>
        </div>

        <div class="page">
            <span>共有1页</span>
            <a href="javascript:;"onclick="test()">首页</a>
            <a href="javascript:;"onclick="test()">上一页</a>
            <a href="javascript:;"onclick="test()" class="pag active" >1</a>
            <a href="javascript:;"onclick="test()" class="pag">2</a>
            <a href="javascript:;"onclick="test()" class="pag">3</a>
            <a href="javascript:;"onclick="test()">下一页</a>
            <a href="javascript:;"onclick="test()">尾页</a>
        </div>
    </div>
</div>


<div id="bottom-wrapper">
    <div class="bottom">
        <div class="bt">
            <a href="#">关于我们</a>
            <a href="#">经典案例</a>
            <a href="#">新闻动态</a>
            <a href="#">服务项目</a>
            <a href="#">咨询团队</a>
            <a href="#">联系我们</a>
        </div>
        <h6>Copyright@2017  . All rights reserved.</h6>
        <span>天狗商城</span>
        <div class="bt1"><a href="#">技术支持：上海鲸米网络科技有限公司</a>
            <span>|</span>
            <a href="#">管理登录</a>
        </div>
    </div>
</div>

<div id="share-wra">
    <div class="share">分享</div>
    <div class="showbox">
        <h4>分享到</h4>
        <ul>
            <li>
                <a href="#">一键分享</a>
            </li>
            <li>
                <a href="#">QQ空间</a>
            </li>
            <li>
                <a href="#">新浪微博</a>
            </li>
            <li>
                <a href="#">百度云收藏</a>
            </li>
            <li>
                <a href="#">微信</a>
            </li>
            <li>
                <a href="#">人人网</a>
            </li>
            <li>
                <a href="#">腾讯微博</a>
            </li>
            <li>
                <a href="#">百度相册</a>
            </li>
            <li>
                <a href="#">开心网</a>
            </li>
            <li>
                <a href="#">腾讯朋友</a>
            </li>
            <li>
                <a href="#">百度贴吧</a>
            </li>
            <li>
                <a href="#">豆瓣网</a>
            </li>
            <li>
                <a href="#">百度新首页</a>
            </li>
            <li>
                <a href="#">QQ好友</a>
            </li>
            <li>
                <a href="#">和讯微博</a>
            </li>
            <li>
                <a href="#">百度中心</a>
            </li>
        </ul>
        <div class="smore">
            <a href="#" class="smorea">更多...</a>
        </div>
    </div>
</div>

<div class="morebox">
    <div class="stit">
        <p>分享到</p>
        <a href="#">X</a>
    </div>
    <ul>
        <li>
            <a href="#">一键分享</a>
        </li>
        <li>
            <a href="#">QQ空间</a>
        </li>
        <li>
            <a href="#">新浪微博</a>
        </li>
        <li>
            <a href="#">百度云收藏</a>
        </li>
        <li>
            <a href="#">微信</a>
        </li>
        <li>
            <a href="#">人人网</a>
        </li>
        <li>
            <a href="#">腾讯微博</a>
        </li>
        <li>
            <a href="#">百度相册</a>
        </li>
        <li>
            <a href="#">开心网</a>
        </li>
        <li>
            <a href="#">腾讯朋友</a>
        </li>
        <li>
            <a href="#">百度贴吧</a>
        </li>
        <li>
            <a href="#">豆瓣网</a>
        </li>
        <li>
            <a href="#">百度新首页</a>
        </li>
        <li>
            <a href="#">QQ好友</a>
        </li>
        <li>
            <a href="#">和讯微博</a>
        </li>
        <li>
            <a href="#">百度中心</a>
        </li>
        <li>
            <a href="#">美丽说</a>
        </li>
        <li>
            <a href="#">蘑菇街</a>
        </li>
        <li>
            <a href="#">点点网</a>
        </li>
        <li>
            <a href="#">花瓣</a>
        </li>
        <li>
            <a href="#">堆糖</a>
        </li>
        <li>
            <a href="#">和讯</a>
        </li>
        <li>
            <a href="#">飞信</a>
        </li>
        <li>
            <a href="#">有道云笔记</a>
        </li>
        <li>
            <a href="#">麦库记事</a>
        </li>
        <li>
            <a href="#">轻笔记</a>
        </li>
        <li>
            <a href="#">人民微博</a>
        </li>
        <li>
            <a href="#">新华微博</a>
        </li>
        <li>
            <a href="#">邮件分享</a>
        </li>
        <li>
            <a href="#">我的搜狐</a>
        </li>
        <li>
            <a href="#">摇篮空间</a>
        </li>
        <li>
            <a href="#">若邻网</a>
        </li>
        <li>
            <a href="#">天涯社区</a>
        </li>
        <li>
            <a href="#">股吧</a>
        </li>
        <li>
            <a href="#">Facebook</a>
        </li>
        <li>
            <a href="#">Twitter</a>
        </li>
        <li>
            <a href="#">linkedin</a>
        </li>
        <li>
            <a href="#">网易热</a>
        </li>
        <li>
            <a href="#">印象笔记</a>
        </li>
        <li>
            <a href="#">复制网址</a>
        </li>
        <li>
            <a href="#">打印</a>
        </li>
    </ul>
    <div class="b-share">
        <a href="#" class="b-share">百度分享</a>
    </div>
</div>


<div class="yuan">
    <a href="javascript:;" onclick="test()">×</a>
</div>

<div class="info">
    <a href="#" class="arrow1"><i class="iconfont">&#xe66c;</i></a>
    <ul>
        <li class="pho">
            <a href="#" class="iconfont">&#xe663;</a>
            <div class="tel hide">
                <h3>电话直呼</h3>
                <h6>15000499950</h6>
            </div>
        </li>
        <li class="icons">
            <a href="#" class="iconfont">&#xe660;</a>
            <a href="#" class="h1 hide">在线留言</a>
        </li>
        <li>
            <a href="#" class="iconfont">&#xe6eb;</a>
            <a href="#" class="h2 hide">发送邮件</a>
        </li>
        <li>
            <a href="#" class="iconfont">&#xe65c;</a>
            <a href="#" class="h3 hide">企业位置</a>
        </li>
    </ul>
    <a href="#" class="arrow2"><i class="iconfont">&#xe6ea;</i></a>
</div>

<div class="top-return">
    <a href="#">
        <img src="images/return.png" alt="">
    </a>
</div>
</body>
</html>